<!DOCTYPE html>
<html lang="utf-8">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <title>大唐软件-每天学一点，每天强一点</title>
    <#include "./common/res.html">

    <style>

        .course-list a {
            display: block;
            width: 100%;
            height: 100%;
            background: #ffffff;
            color: #5049ff;
            text-decoration: none;
            margin-bottom: 10px;
        }
        .course-list a:hover {
            background: #ffe5fa;
        }


    </style>
</head>

<body>
<#include "./common/header.html">
<div class="f-main clearfix">
    <div class="main-course-left">
        <div class="course-info">
            <div class="course-title" style="font-size: 24px;">${(courseSection.name)!}</div>

            <div class="course-video">
                <!--<video src="${s.base}/res/demo.mp4" width="100%" height="100%" controls preload></video>-->
                <video src="${(courseSection.videoUrl)!}" width="100%" height="100%" controls preload></video>
            </div>
            <div class="course-list" style="width: 20%; float: right;border:1px solid #ddd; padding: 10px; border-radius: 10px">
                            <div class="course-chapters">
                                <#if chaptSections??>
                                <#list chaptSections as item>
                                <div class="chapter course-wrap chapter-active">
                                    <!-- 章节标题 -->
                                    <h3>
                                        ${item.name!}
                                    </h3>
                                    <!--<div class="chapter-description">
                                        &lt;!&ndash;${item.desc!}&ndash;&gt;这一段落提供章节描述信息.
                                    </div>-->
                                    <!-- 章节标题 end -->
                                    <!-- 章节小节 -->
                                    <ul class="video">
                                        <#if item.sections??>
                                        <#list item.sections as section>
                                        <li>
                                            <a href="${s.base}/course/video/${section.id!}.html" class="J-media-item">
                                                <!--<a href="${section.videoUrl!}" class="J-media-item">-->
                                                <#if section_index == 0 >
                                                <i class="icon-tick-revert done"></i> <!-- 学习状态: 完成-->
                                            </#if>
                                            <#if section_index == 1 >
                                            <i class="icon-half ing"></i> <!-- 学习状态：正在学习-->
                                        </#if>
                                        <#if section_index gt 1 >
                                        <i class="icon-nolearn start"></i> <!-- 学习状态：未学习-->
                                    </#if>
                                    <i class="imv2-play_circle type"></i> <!--内容类型：视频、代码-->
                                    ${section.name!}
                                    (${section.time!})
                                    </a>
                                    </li>
                                </#list>
                            </#if>
                            </ul>
                            <!-- 章节小节 end -->
                        </div>
                        <hr/>
                    </#list>
                </#if>
            </div>
            </div>
            <!--
            <div  class="course-menu">
                <a  href="javascript:void(0)" >
                    <span onclick="showTab(this,0);" class="menu-item  cur">评论</span>
                </a>
                <a  href="javascript:void(0)" >
                    <span onclick="showTab(this,1);" class="menu-item">问答</span>
                </a>
            </div>
            -->
        </div>

        <!-- 评论区 start -->
        <!--<div id="commentQA">
        </div>-->
        <!-- 评论区 end -->

        <@shiro.user>
        <!--<div style="margin-top: 20px;">
            <div>
                <span id="commentTitle">发布评论：</span>
                <span id="commentTip" style="margin-left: 10px;color:#777;">长度小于200</span>
            </div>
            <form id="commentForm" action="${s.base}/courseComment/doComment.html" method="post"  style="margin: 5px 0px;">
                <input type="hidden" id="commentType" name="type" value="0"/>
                <input type="hidden" name="sectionId" value="${(courseSection.id)!}"/>
                <input type="hidden" name="courseId" value="${(courseSection.courseId)!}"/>

                <textarea id="content" name="content" rows="" cols="100"></textarea>
                <div>
                    <input id="indeityCode" name="indeityCode"  type="text" placeholder="请输入验证码">
                    <img  onclick="reloadIndityImg();" id="indeityImg"  src="${s.base}/tools/identiry/code.html" style="width:80px;height:26px;margin-left:10px;margin-top:-3px;"/>
                </div>
            </form>
            <input type="button" value="发布" class="btn" onclick="doComment();">
        </div>-->
        </@shiro.user>
</div>

<!-- 章节-start -->
<!--
<div class="main-course-right"  >
    <h4 class="mt-50">所有章节</h4>
    <div class="video-course-fix-parent">
        <div class="video-course-fix">
            <#if chaptSections??>
            <#list chaptSections as item>
            <div class="chapter" style="padding: 0px ;border: none;">
                <a href="javascript:void(0);" class="js-open">
                    <h3>
                        <strong>${item.name!}</strong>
                        <span class="drop-down">▼</span>
                    </h3>
                </a>
                <ul class="chapter-sub" style="padding-left:10px;">
                    <#if item.sections??>
                    <#list item.sections as section>
                    <a href="${s.base}/course/video/${section.id!}.html" >
                        <li class="ellipsis video-li"><i class="icon-video">▶</i> ${section.name!}</li>
                    </a>
                </#list>
            </#if>
            </ul>
        </div>
    </#list>
</#if>
</div>
</div>

</div>
-->

<!-- 章节-end -->
</div>

<#include "./common/footer.html">
<!--
<script type="text/javascript">
    $(function(){
        $('.chapter li').hover(function(){
            $(this).find('.icon-video').css('color','#0089D2');
        },function(){
            $(this).find('.icon-video').css('color','#777');
        });

        $('.js-open').click(function(){
            var display = $(this).parent().find('ul').css('display');
            if(display == 'none'){
                $(this).parent().find('ul').css('display','block');
                $(this).find('.drop-down').html('▼');
            }else{
                $(this).parent().find('ul').css('display','none');
                $(this).find('.drop-down').html('▲');
            }
        });

        //默认加载评论
        _queryPage(1,0);
    });

    /**
     *展示tab commentQA
     **/
    function showTab(el,type){
        $('.course-menu').find('span').each(function(i,item){
            $(item).removeClass('cur');
        });
        $(el).addClass('cur');

        _queryPage(1,type);//默认加载 第 1 页
        //设置评论类型
        $('#commentType').val(type);
    }

    /**
     *加载 课程评论 & 问答
     * courseId：课程id
     * sectionId: 章节id
     * type : 类型 0-评论；1-答疑
     */
    var _type = 0; //全局变量
    function _queryPage(pageNum,type){
        if(type == undefined)
            type = _type;
        else
            _type = type;
        //加载评论或者QA
        if(pageNum == undefined)
            pageNum = 1;
        var courseId = ${(courseSection.courseId)!};//课程id
        var sectionId = ${(courseSection.id)!};//章节id
        var url = '${s.base}/courseComment/segment.html';
        $("#commentQA").load(
            url,
            {
                'courseId':courseId,
                'sectionId':sectionId,
                'type':type,
                'pageNum':pageNum
            },
            function(){}
        );
    };

    <@shiro.user>
    // -----评论
    //重新获取验证码
    function reloadIndityImg(){
        document.getElementById("indeityImg").src = CONTEXT_PATH + "/tools/identiry/code.html?ticket=" + Math.random();
    }
    //提交
    function doComment(){
        var indeityCode = $('#indeityCode').val();
        if($.trim(indeityCode).length ==0 ){
            $('#commentTip').css('color','red').html('验证码输入有误');
            return;
        }

        var content = $('#content').val();
        if($.trim(content).length > 200 || $.trim(content).length == 0){
            $('#commentTip').css('color','red').html('评论内容长度请 &gt; 0 , &lt; 200');
            return;
        }

        $('#commentForm').ajaxSubmit({
            datatype : 'json',
            success : function(resp) {
                var resp = $.parseJSON(resp);
                if (resp.errcode == 0) {
                    $('#commentTip').css('color','green').html('评论成功');
                    //自动刷新

                } else if(resp.errcode == 1) {
                    $('#commentTip').css('color','red').html('评论失败');
                }else if(resp.errcode == 2) {
                    $('#commentTip').css('color','red').html('验证码输入有误');
                }else if(resp.errcode == 3) {
                    $('#commentTip').css('color','red').html('评论内容长度请 &gt; 0 , &lt; 200');
                }

                reloadIndityImg();
                $('#indeityCode').val('');
                $('#content').val('');
            },
            error : function(xhr) {
            }
        });
    }
    </@shiro.user>
</script>
-->
</body>

</html>
